<div
  class="d-flex-column my-agenda-container width-100"
  [formGroup]="agenda"
  *ngIf="agenda"
>
  <!-- Measurement -->
  <div class="d-flex">
    <div style="width: 216px">
      <select
        daChoices
        labelKey="name"
        valueKey="metricName"
        formControlName="measurement"
        (change)="onMeasurementChange($event)"
        [choicesConfig]="botSetupStore.metricsList"
      ></select>
    </div>

    <div class="d-flex align-start-center">
      <label class="text-between-inputs inner-text"> {{"6" | transloco}}</label>

      <div style="width: 216px">
        <select
          daChoices
          formControlName="metricDirection"
          labelKey="name"
          [daOptions]="{searchEnabled: false}"
          valueKey="value"
          [choicesConfig]="botSetupStore.metricDirection"
        ></select>
      </div>

      <label class="right-label inner-text">{{"7" | transloco}}</label>
    </div>
  </div>
  <div class="input-field">
    <div
      class="input-error-abs"
      *ngIf="agenda.get('measurement').hasError('required') && agenda.get('measurement').touched"
    >
      {{"8" | transloco}}
    </div>
  </div>

  <!-- Dimensions -->
  <div class="d-flex my-agenda-header">{{"9" | transloco}}</div>
  <mat-radio-group
    class="d-flex-column"
    formControlName="isAllDimensions"
    (change)="onIsAllDimensionsChange($event)"
  >
    <mat-radio-button
      class="checkbox-input"
      [value]="botSetupStore.isAllDimensions[0].value"
    >
      <span class="input-line primary-text">{{"10" | transloco}}</span>
    </mat-radio-button>
    <mat-radio-button
      class="checkbox-input"
      [value]="botSetupStore.isAllDimensions[1].value"
    >
      <span class="input-line primary-text">{{"11" | transloco}}</span>
    </mat-radio-button>
  </mat-radio-group>

  <div
    class="space-between-rows d-flex"
    [hidden]="agenda.controls.isAllDimensions.value === botSetupStore.isAllDimensions[0].value"
  >
    <div style="width: 468px">
      <select
        daChoices
        multiple
        labelKey="name"
        valueKey="systemName"
        formControlName="dimensionsListSelection"
        (removeItem)="onDimensionUnSelected($event)"
        [choicesConfig]="botSetupStore.dimensions"
      ></select>
    </div>
  </div>

  <!-- Dimensions list -->
  <div
    [ngClass]="{'input-field': agenda.get('dimensionsListSelection').hasError('required') && agenda.get('dimensionsListSelection').touched }"
  >
    <div
      class="input-error-abs"
      *ngIf="agenda.get('dimensionsListSelection').hasError('required') && agenda.get('dimensionsListSelection').touched"
    >
      {{"12" | transloco}}
    </div>
  </div>

  <div class="d-flex align-start-center">
    <!-- Date range -->
    <div class="d-flex-column">
      <!-- translated in the component.ts and the value set according to enableCompareTo status (Within / Later Date) -->
      <div
        data-auto-id="agenda_setup_date_range_label"
        class="top-line secondary-text d-flex"
      >
        {{_dateRangeLabelText}}
      </div>

      <da-date-picker
        *ngIf="!!dateRange"
        class="long-select"
        [selectedRange]="dateRange"
        [selectedDateType]="dateRange.dateRangeType"
        (onChange)="onDateChange($event)"
      ></da-date-picker>
    </div>
    <!-- compare to Date range -->
    <div
      *ngIf="allowNewBotType()"
      class="d-flex align-center mt-30"
      [ngClass]="{'mt-30': !isCompareToEnabled}"
    >
      <dato-checkbox
        [formControl]="agenda.controls.enableCompareTo"
        [ngClass]="{'mt-30': isCompareToEnabled}"
        class="mx-10"
        >{{"13" | transloco}}
      </dato-checkbox>
      <div [ngClass]="{'d-flex-column': isCompareToEnabled}">
        <div
          *ngIf="isCompareToEnabled; else isCompareToDisabled"
          class="top-line secondary-text d-flex"
        >
          {{"14" | transloco}}
        </div>
        <ng-template #isCompareToDisabled>
          <span
            class="primary-200-color primary-50-background-color d-flex align-start-center px-10 long-select"
            >{{"15" | transloco}}</span
          >
        </ng-template>
        <da-date-picker
          *ngIf="!!compareToDateRange && isCompareToEnabled"
          class="long-select"
          [selectedRange]="compareToDateRange"
          [selectedDateType]="compareToDateRange.dateRangeType"
          (onChange)="onCompareToDateChange($event)"
        >
        </da-date-picker>
      </div>
    </div>
  </div>

  <!-- Filters -->
  <div class="my-agenda-header d-flex">{{"16" | transloco}}</div>
  <div class="d-flex">
    <div class="add-filter-button" (click)="addFiltersModal($event)">
      <dato-icon datoIcon="plus-round" class="icon"></dato-icon>
    </div>
    <span class="add-filter-text" (click)="addFiltersModal($event)"
      >{{"17" | transloco}} {{"18" | transloco}}</span
    >
  </div>
  <!-- Header -->
  <div class="my-agenda-header d-flex">{{"19" | transloco}}</div>
</div>
